<template>
  <div class="carManger">
    <div class="carManger-top">
      <p>车辆管理</p>
      <p
        v-for="(ele, i) in list"
        :key="i"
        :class="choose == i ? 'choosed' : ''"
        @click="changeTop(i)"
      >
        {{ ele.name }}({{ ele.num }})辆
      </p>
    </div>
    <div class="carManger-search">
      <el-button type="primary" @click="showDig()" round
        >添加</el-button
      >
      <div class="carManger-search-input">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="搜索车辆/司机" v-model="name" />
      </div>
      <el-button type="primary" @click="search()" round>搜索</el-button>
    </div>
    <div class="carManger-table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="车辆信息">
          <template slot-scope="scope">
            <div class="tableInfo">
              <img
                style="width: 0.4rem; margin-right: 0.1rem"
                src="@/assets/main/car.png"
                alt
              />
              <span>{{ scope.row.carNo }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="carNature" label="性质"></el-table-column>
        <el-table-column
          property="name"
          label="所属"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          property="carType"
          label="车辆类型"
          show-overflow-tooltip
          sortable
        ></el-table-column>
        <el-table-column
          property="status"
          label="状态"
          show-overflow-tooltip
          sortable
        ></el-table-column>
        <el-table-column
          property="driverName"
          label="司机名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          property="driverMobile"
          label="联系方式"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small">编辑</el-button>
            <el-button
              @click.native.prevent="deleteIndex(scope.$index, tableData)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="carManger-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="getTotal"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <div class="myDialog">
        <p class="myDialog-title">车辆添加</p>
        <div class="myDialog-info">
          <div class="myDialog-info-template">
            <p class="myDialog-info-template-first">车辆牌照：</p>
            <div>
              <el-select
                v-model="value"
                placeholder="请选择车辆拍照"
                style="width: 20%"
              >
                <el-option
                  v-for="item in regoin"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-input
                placeholder="请输入车牌号"
                v-model="addtion.carId"
              ></el-input>
            </div>
          </div>
          <div class="myDialog-info-template">
            <p class="myDialog-info-template-first">车辆类型：</p>
            <div>
              <el-select
                v-model="addtion.carTypeValue"
                placeholder="请选择车辆类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in addtion.carType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="myDialog-info-template">
            <p class="myDialog-info-template-first">车辆性质：</p>
            <div>
              <el-select
                v-model="addtion.carValue"
                placeholder="请选择车辆性质"
                style="width: 100%"
              >
                <el-option
                  v-for="item in addtion.carNature"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="myDialog-info-template">
            <p class="myDialog-info-template-first">所属：</p>
            <div>
              <el-input
                placeholder="请输入所属"
                v-model="addtion.territory"
                style="width: 100%"
              ></el-input>
            </div>
          </div>
          <div class="myDialog-info-template">
            <p class="myDialog-info-template-first">司机选择：</p>
            <div>
              <el-select
                v-model="addtion.driverValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in addtion.driverSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addtionF(dialogVisible)"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addtion: {
        carId: "",
        carType: [
          {
            value: "货车",
            label: "货车",
          },
        ],
        carNature: [
          {
            value: "个人",
            label: "个人",
          },
          {
            value: "单位",
            label: "单位",
          },
          {
            value: "租用",
            label: "租用",
          },
        ],
        carTypeValue: "",
        carValue: "",
        territory: "",
        driverSelect: [
          {
            value: "司机",
            label: "司机",
          },
        ],
        driverValue: "",
      },
      dialogVisible: false,
      list: [
        { name: "全部", num: 0 },
        { name: "工作中", num: 0 },
        { name: "空闲", num: 0 },
        { name: "故障", num: 0 },
      ],
      choose: 0,
      free: 8,
      fault: 12,
      tableData: [
        {
          info: "川A00001",
          carNature: "单位",
          belong: "成都市政府",
          address: "No. 189, Grove St, Los Angeles",
          date: "2016-05-03",
          type: "货车",
          state: "工作中",
          name: "李建国",
          phone: "8727847263",
        },
      ],
      regoin: [
        {
          value: "川",
          label: "川",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
      value: "川",
      pageNum: 1,
      name: null,
    };
  },
  computed: {
    getTotal() {
      return this.list[this.choose].num;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    addtionF(dialogVisible) {
      var next = true;
      Object.keys(this.addtion).some((ele, value) => {
        if (this.addtion[ele] == "") {
          this.$message({
            message: "请填写完整",
            offset: 400,
          });
          next = false;
          return true;
        }
      });
      if (next) {
        // console.log(this.addtion);
        this.axios("post", this.inter.postCarAdd, {
          carNature: this.addtion.carValue,
          carNo: this.addtion.carId,
          carType: this.addtion.carTypeValue,
          driverId: this.addtion.driverValue,
          name: this.addtion.territory,
        }).then((res) => {
          // console.log(res);
          this.$message({
            message: "添加成功",
            offset: 300,
            type: "success",
          });
          this.dialogVisible = false;
          this.getData();
        });
      }
    },
    deleteIndex(index, rows) {
      // rows.splice(index, 1);
      this.axios("post", this.inter.postCarDelete + rows[index].id).then(
        (res) => {
          this.getData();
        })
    },
    handleSelectionChange() {},
    search() {
      this.getData();
    },
    getData() {
      this.axios("get", this.inter.getAllCar, {
        pageNum: this.pageNum,
        pageSize: 10,
        name: this.name,
        status: this.choose == 0 ? null : this.choose,
      }).then((res) => {
        // console.log(res);
        this.list[this.choose].num = res.total;
        this.tableData = res.list;
      });
    },
    changeTop(i) {
      this.choose = i;
      this.pageNum = 1;
      this.getData();
    },
    currentChange(page) {
      this.pageNum = page;
      this.getData();
    },
    showDig(){
      this.dialogVisible = true
      this.axios("get",this.inter.getAllDriver,{
        "pageNum":1,
        "pageSize":10000
      }).then(res=>{
        // console.log(res);
        this.addtion.driverSelect = []

        res.list.filter((item,index)=>{
          this.addtion.driverSelect.push({value:item.id,label:item.name})
        })
      })
    },
    amendCar() {},
  },
};
</script>

<style lang="scss" scoped>
.carManger {
  .myDialog {
    .dialog-footer {
      .el-button {
        margin-right: 0.2rem;
      }
      margin-top: 0.2rem;
      display: flex;
      flex-direction: row-reverse;
    }
    &-info-template {
      div {
        display: flex;
        width: 80%;
      }
      &-first {
        width: 20%;
        text-align: left;
      }
      display: flex;
      white-space: nowrap;
      align-items: center;
      padding: 0 0.2rem;
      background: #f5f5f5;
      margin-top: 0.2rem;
    }
    &-title {
      background: #006ab4;
      color: #fff;
      text-align: left;
      padding: 0.1rem 0.2rem;
    }
    background: #f4f4f4;
    padding-bottom: 0.2rem;
  }
  &-pagination {
    text-align: left;
    margin-top: 0.1rem;
    background: #fff;
    padding: 0.05rem;
  }
  &-table {
    .tableInfo {
      display: flex;
      align-items: center;
    }
    padding: 0.2rem;
  }
  &-search {
    .el-button {
      &:nth-child(1) {
        background: #cdebff;
        color: #006ab4;
        padding: 0rem 0.2rem;
        // height: 0;
      }
      &:nth-child(2) {
        padding: 0rem 0.2rem;
        background: #006ab4;
      }
      // background: #006ab4 !important;
    }
    &-input {
      i {
        position: absolute;
        left: 0.1rem;
        top: 25%;
      }
      input {
        &:focus {
          outline: none;
          border: #006ab4 solid 0.01rem;
        }
        border-radius: 0.34rem;
        background: #f5f5f5;
        padding: 0.1rem 0.4rem;
        border: none;
      }
      position: relative;
      margin-right: 0.2rem;
      margin-left: auto;
    }
    display: flex;
    padding: 0.1rem;
    background: #fff;
  }
  &-top {
    .choosed {
      color: #006ab4;
    }
    p {
      cursor: pointer;
      &:nth-child(5),
      &:nth-child(4),
      &:nth-child(3) {
        margin-left: 0.4rem;
        font-size: 0.16rem;
      }
      &:nth-child(2) {
        margin-left: 0.4rem;
      }
      &:nth-child(1) {
        font-weight: bold;
        font-size: 0.2rem;
        color: #000;
      }
      color: #999;
      margin-right: 0.1rem;
    }
    background: #fff;
    padding: 0.12rem;
    display: flex;
    align-items: center;
  }
}
</style>
<style lang="scss">
.carManger {
  .el-input__inner {
    border: none;
  }
  .el-dialog__header {
    display: none !important;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>
